<template>
  <div class="app-container">
    <el-form>
      <el-form-item v-if="checkPermission('/menu/insertRootMenu.do')">
        <el-button type="primary" @click="addRootMenu">添加根菜单</el-button>
        <el-input v-model="rootText" style="margin-bottom:30px;"/>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="12">
        <el-card>
          <el-tree
            ref="tree2"
            :data="data1"
            :props="defaultProps"
            :filter-node-method="filterNode"
            show-checkbox
            node-key="guid"
            class="filter-tree"
            @node-click="nodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <i class="el-icon-plus" @click="() => append(data)"></i>
                <i class="el-icon-delete" @click="() => deleteMenu(node,data)"></i>
                <i class="el-icon-edit" @click="() => edit(data)"></i>
              </span>
            </span>
          </el-tree>
          <el-button class="delete" type="danger" size="mini" @click="delChooseMenu">删除选中分类</el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="dialogVisible">
      <el-form ref="ruleForm" :model="addChild">
        <el-form-item
          label="分类名"
          prop="name"
          :rules="{ required: true, message: '请输入分类名', trigger: 'blur' }"
        >
          <el-input v-model="addChild.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-switch v-model="addChild.required" active-text="必填" inactive-text="非必填"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addChildType">完 成</el-button>
          <el-button type="default" @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import checkPermission from "@/utils/permission";
import {
  getFileMenu,
  insertFileMenu,
  updateFileMenu,
  insertRootMenu,
  selectAllRootMenu,
  delteLeafMenu
} from "@/api/menu";
export default {
  data() {
    return {
      title: "",
      dialogVisible: false,
      addChild: {
        name: "",
        required: false,
        guid: "",
        parentGuid: "",
        rootGuid: "",
        level: 1
      },
      data2: [
        {
          id: 1,
          label: "Level one 1",
          children: [
            {
              id: 4,
              label: "Level two 1-1",
              children: [
                {
                  id: 9,
                  label: "Level three 1-1-1"
                },
                {
                  id: 10,
                  label: "Level three 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "Level one 2",
          children: [
            {
              id: 5,
              label: "Level two 2-1"
            },
            {
              id: 6,
              label: "Level two 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "Level one 3",
          children: [
            {
              id: 7,
              label: "Level two 3-1"
            },
            {
              id: 8,
              label: "Level two 3-2"
            }
          ]
        }
      ],
      data1: [],
      rootText: "",
      currentData: {},
      defaultProps: {
        children: "childList",
        label: "name"
      }
    };
  },
  watch: {
    // filterText(val) {
    //   this.$refs.tree2.filter(val);
    // }
  },
  mounted() {
    this.getMenu();
  },
  methods: {
    checkPermission,
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getMenu() {
      selectAllRootMenu().then(response => {
        this.data1 = response.body;
      });
    },
    nodeClick(data) {
      console.log(data);
    },
    append(data) {
      this.currentData = data;
      this.dialogVisible = true;
      this.title = "添加新分类";
    },
    edit(data) {
      this.currentData = data;
      this.addChild.name = data.name;
      this.addChild.required = data.required;
      this.dialogVisible = true;
      this.title = "修改分类名";
    },
    deleteMenu(node, data) {
      let guid = { leafMenus: [] };
      guid.leafMenus.push(data.guid);
      delteLeafMenu(guid).then(response => {
        this.getMenu();
      });
    },
    addChildType() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if (this.title === "添加新分类") {
            this.addChild.parentGuid = this.currentData.guid;
            this.addChild.level = this.currentData.level + 1;
            this.addChild.rootGuid = this.currentData.rootGuid;
            console.log(this.addChild);
            insertFileMenu(this.addChild).then(response => {
              this.dialogVisible = false;
              this.getMenu();
            });
          } else {
            this.addChild.guid = this.currentData.guid;
            updateFileMenu(this.addChild).then(response => {
              if (response.code === 100) {
                this.dialogVisible = false;
                this.getMenu();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addRootMenu() {
      insertRootMenu(this.rootText).then(response => {
        this.getMenu();
      });
    },
    delChooseMenu() {
      //删除选中menu叶子节点
      let chooseMenu = this.$refs.tree2.getCheckedNodes(false, false);
      const guid = [];
      for (let index = 0; index < chooseMenu.length; index++) {
        guid.push(chooseMenu[index].guid);
      }
      if (guid.length > 0) {
        let guidData = { leafMenus: [] };
        guidData.leafMenus = guid;
        delteLeafMenu(guidData).then(response => {
          if (response.code === 100) {
            this.getMenu();
          }
        });
      } else {
        this.$message({
          message: "请选中要删除的分类!",
          type: "error"
        });
      }
    },
    cancel() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.delete {
  margin: 10px;
  float: right;
}
</style>
